<!--
 * @Author: your name
 * @Date: 2020-08-22 01:51:42
 * @LastEditTime: 2020-08-26 21:55:44
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \exam-list\src\components\checkpaper\PaperDetail.vue
-->
<template>
  <div>
    <h2>学生管理</h2>
    <!-- 头部 -->
    <div>
      <Input v-model="selectInfo.name" class="ipt" placeholder="输入学生姓名" style="width: 186px" />
      <Select v-model="selectInfo.text" class="ipt" placeholder="请选择教室号" style="width:200px">
        <Option
          v-for="(item,index) in studentList"
          :value="item.room_text"
          :key="index"
        >{{ item.room_text }}</Option>
      </Select>
      <Select v-model="selectInfo.class" class="ipt" placeholder="请选择班级名" style="width:200px">
        <Option
          v-for="(item,index) in studentList"
          :value="item.grade_name"
          :key="index"
        >{{ item.grade_name }}</Option>
      </Select>
      <Button type="primary" style="width:118px">搜索</Button>
      <Button class="btn2" style="width:118px" @click="chong" type="primary">重置</Button>
    </div>
    <!-- 表格 -->
    <Table border :columns="columns12" :data="pageList">
      <template slot-scope="{ row }" slot="student_name">
        <p>{{ row.student_name }}</p>
      </template>
      <template slot-scope="{ row }" slot="action">
        <span type="error" size="small" @click="remove(row)" class="del" style="cursor:pointer">删除</span>
        <span type="error" size="small" @click="editItem(row)" style="cursor:pointer">编辑</span>
      </template>
    </Table>
    <!-- 分页 -->
    <Page
      @on-change="handleCurrentChange"
      @on-page-size-change="handleSizeChange"
      :total="total"
      size="small"
      show-total
      :page-size-opts="[10, 20, 30, 40]"
      :current="pageListNum.pagenum"
      :page-size="pageListNum.pagesize"
      show-elevator
      show-sizer
    />
    <!-- 编辑 -->
    <Modal v-model="flag" title="编辑学生信息" @on-ok="okEdit" @on-cancel="cancelEdit" width="500">
      <Form ref="formEditInline" :model="formInline" :label-width="110" inline>
        <FormItem label="学生学号" prop="student_id">
          <Input v-model="editForm.student_id" style="width: 350px" placeholder="学生学号" />
        </FormItem>
        <FormItem label="学生姓名" prop="student_name">
          <Input v-model="editForm.student_name" disabled style="width: 350px" placeholder="学生姓名" />
        </FormItem>
        <FormItem label="学生密码" prop="student_pwd">
          <Input v-model="editForm.student_pwd" style="width: 350px" placeholder="学生密码" />
        </FormItem>
        <FormItem label="学生所在班级id" prop="grade_id">
          <Input v-model="editForm.grade_id" style="width: 350px" placeholder="学生所在班级id" />
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from 'vuex'
export default {
  data() {
    return {
      editForm: {},
      flag: false, // 编辑弹框开关
      formInline: {
        // 提示文字
        student_id: '',
        student_name: '',
        student_pwd: '',
        grade_id: ''
      },
      selectInfo: {
        // 表头
        name: '',
        text: '',
        class: ''
      },
      pageListNum: {
        // 分页
        pagenum: 1,
        pagesize: 10
      },
      value: '',
      model1: '',
      columns12: [
        {
          title: '姓名',
          slot: 'student_name'
        },
        {
          title: '学号',
          key: 'student_id'
        },
        {
          title: '班级',
          key: 'grade_name'
        },
        {
          title: '教室',
          key: 'room_text'
        },
        {
          title: '密码',
          key: 'student_pwd'
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ]
    }
  },
  methods: {
    ...mapActions('GetStudent', [
      'deleteStudentList',
      'putStudentList',
      'getStudentList'
    ]),
    ...mapMutations('GetStudent', ['getPage']),
    chong() {
      // 重置
      this.selectInfo.name = ''
      this.selectInfo.text = ''
      this.selectInfo.class = ''
    },
    editItem(row) {
      // 编辑
      this.flag = true
      this.editForm = JSON.parse(JSON.stringify(row))
    },
    okEdit() {
      // 编辑确定
      this.putStudentList(this.editForm)
      this.getStudentList()
    },
    cancelEdit() {
      // 编辑取消
      console.log(1)
    },
    handleSizeChange(val) {
      // 改变每页条数
      this.pageListNum.pagesize = val
      console.log(val, 'size')
      this.getPage(this.pageListNum)
    },
    handleCurrentChange(val) {
      // 改变当前页
      this.pageListNum.pagenum = val
      console.log(val, 'current')
      this.getPage(this.pageListNum)
    },
    remove(row) {
      // 删除
      console.log(row)
      const id = row.student_id
      this.deleteStudentList(id)
      this.getStudentList()
    }
  },
  computed: {
    ...mapState('GetStudent', ['studentList', 'pageList']),
    total() {
      return this.studentList.length
    }
  },
  created() {
    this.getStudentList()
    console.log('看见我了')
    console.log('又看见了')
  }
}
</script>

<style lang="scss" scoped>
.ipt {
  margin-right: 15px;
}
.btn2 {
  margin-left: 15px;
}
.del {
  margin-right: 20px;
}
</style>
